import React, { Component } from "react";
import {
  View,
  Clipboard,
  Text,
  TouchableOpacity,
  DeviceEventEmitter
} from "react-native";
import NavBarConfig from "../modules/NavBar";
import { ORIGIN, WALLET, MEMBER } from "../../config/Api";
import http from "../../util/http";
import { toast } from "../../util/tip";
import { TRANFER_AMOUNT, TRANFER_TYPE, } from "../../util/Const";
import storage from "../../util/storage";
import Qrcode from "react-native-qrcode";
import receiptStyles from "../../style/pages/receiptCode";
import { Color } from "../../style/common";

class Receiptcode extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "收款碼",
        headerRight: []
      },
      navigation
    );
  state = {
    wallet: {
      amount: 0,
      address: "",
      freeze_amount: 0
    },
    loc: {
      type: 0,
      amount: 0
    },
    tel:""
  };

  async getWalletInfo() {
    const data = await http.get(WALLET);
    this.setState({
      wallet: data.data
    });
  }

  createCopyClip() {
    Clipboard.setString(this.state.wallet.address);
    toast("複製成功");
  }

  initQrcodeParams() {
    this.setState({
      loc: {
        type: storage.get(TRANFER_TYPE),
        amount: storage.get(TRANFER_AMOUNT)
      }
    });
  }

  async getMemberInfo() {
    const data = await http.get(MEMBER);
    this.setState({
      tel: data.data.tel.substring(2)
    });
  }

  componentWillMount() {
    this.getWalletInfo();
    this.getMemberInfo();
    this.subscription = DeviceEventEmitter.addListener("setQrcode", () => {
      this.initQrcodeParams();
    });
  }

  componentWillUnmount() {
    storage.remove(TRANFER_AMOUNT);
    storage.remove(TRANFER_TYPE);
    this.subscription.remove();
  }

  render() {
    return (
      <View>
        <View style={receiptStyles.qrcodeContainer}>
          <Text style={receiptStyles.copyCon}>
            BGT充值錢包地址：
            {this.state.wallet.address}
          </Text>
          <TouchableOpacity onPress={this.createCopyClip.bind(this)}>
            <Text style={receiptStyles.button}>複製地址</Text>
          </TouchableOpacity>
          <View style={receiptStyles.qrcodeMain}>
            <Text style={receiptStyles.qrcodeMainP}>
              掃二維碼將BGT或額度劃轉給我
            </Text>
            {this.state.loc.amount ? (
              <View style={receiptStyles.bgtCount}>
                <Text style={{ textAlign: "center" }}>
                  {this.state.loc.amount}{" "}
                  {this.state.loc.type == 0 ? "BGT" : "額度"}
                </Text>
              </View>
            ) : null}
            <View
              style={{
                marginTop: 20,
                marginBottom: 20,
                alignItems: "center"
              }}
            >
              <Qrcode
                value={
                  this.state.loc.amount
                    ? JSON.stringify({
                      path: 'Transfer',
                        url:
                          ORIGIN +
                          `/Transfer?type=${this.state.loc.type}&amount=${
                            this.state.loc.amount
                          }&address=${this.state.wallet.address}`,
                          params: {
                            type: this.state.loc.type || 0,
                            amount: this.state.loc.amount,
                            address: this.state.wallet.address,
                            tel: this.state.tel
                          }
                      })
                    : JSON.stringify({
                        path: "Transfer",
                        url: ORIGIN + `/Transfer`,
                        params: {
                            address: this.state.wallet.address,
                            tel: this.state.tel
                        }
                      })
                }
                size={200}
                bgColor="black"
                fgColor="white"
              />
              <View style={receiptStyles.qrcodeOpt}>
                <TouchableOpacity
                  onPress={() =>
                    this.props.navigation.navigate("Receiptcodeset")
                  }
                >
                  <Text
                    style={{
                      color: Color
                    }}
                  >
                    收款碼設置
                  </Text>
                </TouchableOpacity>
                {/* <a onClick={() => toast("請長按保存")}>保存收款碼</a> */}
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

export default Receiptcode;
